<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文档流</title>
    <style>
        .box1,.box2,.box3{
        }

        .box1{
            background-color: #bfa;
        }

        .box2{
            background-color: tomato;
        }

        .box3{
            background-color: orange;
        }

        span{
            background-color: yellow;
        }
    </style>
</head>
<body>

<!--
    文档流（normal flow） 正常布局流
        https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow
        - 文档流是网页中的位置，我们所创建的元素默认都存在于文档流中
        - 文档流中的元素，必须要遵循文档流的规则在页面中排列
            - 块元素
                - 块元素在文档流中自上向下垂直排列
                - 块元素的默认宽度会将父元素撑满（默认值为auto）
                - 块元素的默认高度被内容撑开

            - 行内元素
                - 行内元素在文档流中会自左向右水平排列，如果一行不足以容纳所有元素
                    则会另起一行继续自左向右水平排列（和我们日常的书写相同）
                - 行内元素的默认宽度和高度都被内容撑开
-->
<div class="box1">aa</div>
<div class="box2">bb</div>
<div class="box3">cc</div>

<span>哈哈哈，哈哈哈，哈哈哈哈哈哈，呵呵哈哈哈，我是一个小span</span>
<span>哈哈哈，哈哈哈，哈哈哈哈哈哈，呵呵哈哈哈，我是一个小span</span>
<span>哈哈哈，哈哈哈，哈哈哈哈哈哈，呵呵哈哈哈，我是一个小span</span>
<span>哈哈哈，哈哈哈，哈哈哈哈哈哈，呵呵哈哈哈，我是一个小span</span>
</body>
</html>